<template>

    <h3>10.Class绑定</h3>
    <!-- class属性可以接收一个对象作为值 -->
    <p :class="{'active':isActive, 'text-danger':hasError}">样式绑定1</p>
    
    <!-- 对于多个对象导致的代码过长，可以通过对象引用 -->
    <p :class="classObject">样式绑定2</p>

    <!-- 也可以接收一个数组 -->
    <p :class="[arrActive, arrHasError]">样式绑定3</p>
    <!-- 也可以结合三目运算符 -->
    <p :class="[isActive ? 'active text-danger' : '']">样式绑定4</p>
    <!-- 数组和对象嵌套使用时，只能数组套对象，不能反过来 -->
    <p :class="[isActive ? 'active text-danger' : { 'text-danger':hasError }]">样式绑定5</p>

</template>

<script>

    export default {
        data(){
            return{
                isActive:true,
                hasError:true,
                classObject:{
                    'active':true,
                    'text-danger':true
                },
                arrActive:'active',
                arrHasError:'text-danger'
            }
        }

    }

</script>

<!-- scoped让该样式只在当前组件中生效 -->
<style scoped>

.active{
    font-size: 20px;
}

.text-danger{
    color: red;
}

</style>